<template>
   <div class="">
      <div>
         <img slot="header" src="https://git.oschina.net/uploads/images/2017/0604/182759_5137b6fa_61523.jpeg" style="width:100%;height:150px;display:block;">
        <group style="margin-top:-1.17647059em;font-size: 12px;">
          <cell title="活动时间" :inline-desc=(activity.activityStartTime) :value=(activity.activityAddr)></cell>
        </group>
        <div v-if="isStart==2 & activity.highlights!==null">
          <group>
            <cell style="color:#999;font-size:16px;" title="活动花絮" :link="{ path: '/activity/activityHighlights', query: { id: activity.id }}"></cell>
          </group>
        </div>
        <card  style="padding-bottom: 10px;"> 
          <div slot="content" class="card-padding">
            <div v-if="customerList==null">
              <p style="color:#999;font-size:14px;margin-bottom: 5px;">0人参与</p>
            </div>
            <div v-if="customerList!==null">
              <p style="color:#999;font-size:14px;margin-bottom: 5px;">{{ customerList.length }}人参与</p>
            </div>
            <ul class="participate-img">
              <li v-for="customer in customerList">
                <img :src=customer.avatar />
              </li>
            </ul>
           </div>
        </card>
        <div style="margin-top:10px;">
          <div v-if="isStart==0">
            <div v-if="isJoin==0">
              <div class="fly-btn-10" @click="joinActivity">报名参加</div>
            </div>
            <div v-if="isJoin==1">
              <div class="fly-btn-10">已参加</div>
            </div>
          </div>
          <div v-if="isStart==1">
            <div class="fly-btn-10">活动已开始</div>
          </div>
          <div v-if="isStart==2">
            <div class="fly-btn-10">活动已结束</div>
          </div>
        </div>
        <group style="text-align: center;">
          <div class="title">/活动介绍/</div>
          <p style="color: #666;padding-bottom: 20px;">
            {{ activity.activityContent }}
          </p>
        </group>    
      </div>
      <group style="margin-top:0px">
      <cell title="留言">
        <div>
          <span  @click="commentMain" style="color: rgb(16, 197, 182)">回复</span>
        </div>
      </cell>
      </group>
      <card>
        <div slot="content" class="card-padding">
          <div class="list-block media-list">
            <ul>
              <li class="list-block-li" v-for="(item, index) in comments">
                  <div class="item-content">
                    <div class="item-media">
                      <img :src=item.commentImg style='width: 2.2rem;height: 2.2rem;'>
                    </div>
                    <div class="item-inner">
                        <div class="userProfile">
                            <div class="item-title-row">
                            <div class="item-title">{{ item.commentByName }}</div>
                            </div>
                            <!-- <div class="item-subtitle" style="font-size: 0.75rem;">1天前</div> -->
                        </div>
                        <!-- <div class="userSchool">点赞</div> -->
                    </div>
                  </div>
                  <div style="margin-left: 2.8rem;" class="">
                      <div class="card-content">
                        <div class="card-content-inner">{{item.commentContent}}</div>
                        <div style="text-align:right;height: 20px;line-height: 20px;font-size: 10px;">
                          <span>{{item.commentTime | formatDate }}</span>
                          <span @click="commentOther(item.id,item.commentBy, index)" class="m-bar">回复</span>
                        </div>
                      </div>
                      <ul>
                        <li class="content-inner-li" v-for="(subItem, idx) in item.subComents">
                          <span  style="color: #10c5b6;">{{subItem.commentByName}}</span>
                          <span>回复</span>
                          <span  style="color: #10c5b6;">{{subItem.commentTargetUserName}}：</span>
                          <div class="card-content-inner">{{subItem.commentContent}}</div>

                          <div style="text-align:right;height: 20px;line-height: 20px;font-size: 10px;">
                            <span>2017-09-11 13:33</span> 
                            <span @click="commentOther(subItem.id,subItem.commentBy, index)" class="m-bar">回复</span>
                          </div>
                        </li>
                      </ul>
                  </div>
              </li>
            </ul>
          </div>
        </div>
      </card>
      <div v-transfer-dom>
        <confirm v-model="show5"
        ref="confirm5"
        title="写你的留言"
        @on-cancel="onCancel"
        @on-confirm="onConfirm5"
        @on-show="onShow5"
        @on-hide="onHide">
        <div style="margin-top: 5px;">
          <textarea :value="content" id='commentContent' style ="padding: 5px;
            height: 80px;
            width: 90%;
            margin: 0 auto;"/>
        </div>
        </confirm>
      </div>
      <div v-transfer-dom>
        <confirm v-model="show1"
        title="报名参加"
        @on-cancel="onCancel1"
        @on-confirm="onConfirm1"
        @on-show="onShow1"
        @on-hide="onHide1">
          <p style="text-align:center; margin-bottom: 5px;">请填写手机号</p>
          <input type="number" id="phone" style="height: 26px;text-align: center;font-size: 14px;margin-top: 3px;"/>
        </confirm>
      </div>
      <div v-transfer-dom>
        <confirm v-model="show2"
        title="报名参加"
        @on-cancel="onCancel2"
        @on-confirm="onConfirm2"
        @on-show="onShow2"
        @on-hide="onHide2">
          <p style="text-align:center;">您确定报名参加该活动?</p>
        </confirm>
      </div>
      <toast v-model="showToast" @on-hide="onHideToast">报名成功</toast>
   </div>
</template>

<script>

import { Group, Card, Cell, XButton, Confirm, Toast, TransferDom } from 'vux'
import { formatDate, getCustomerId, commentModule, getCustomerBase } from '../utils/utils'
import { getAuthInfo } from '../utils/common'
import { getShareParamsInit } from '../utils/wxJsSdkUtils'

export default {
  filters: {
    formatDate (time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm')
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Group,
    Card,
    Cell,
    XButton,
    Confirm,
    Toast
  },
  data () {
    return {
      show1: false,
      show2: false,
      show5: false,
      showToast: false,
      activity: [],
      customerList: [],
      activityId: '',
      isJoin: '',
      isHavPhone: '',
      isStart: '',
      customerId: getCustomerId(),
      customerBase: getCustomerBase(),
      comments: [],
      currentId: '',
      commentTargetUserId: '',
      index: 0
    }
  },
  computed: {
    content () {
      return this.contentValue
    }
  },
  beforeRouteLeave (to, from, next) {
    console.log('离开页面')
    this.$destroy(true)
    next(true)
  },
  created: function () {
    getAuthInfo('activity/activityDetail')
  },
  mounted: function () {
    console.log('请求参数')
    console.log(this.$router.currentRoute.query.id)
    let id = this.$router.currentRoute.query.id
    this.activityId = id.toString()
    let path = this.$router.history.current.path
    if (path === '/activity/activityDetail') {
      console.log('路径是一个/activity/activityDetail')
    }
    console.log(this.$router.currentRoute.query.customerId)
    let customerIdV = this.$router.currentRoute.query.customerId
    if (customerIdV !== undefined) {
      this.customerId = customerIdV
      window.localStorage.setItem('customerId', this.customerId)
      console.log(window.localStorage.getItem('customerId'))
    }

    console.log('this.customerId')
    console.log(this.customerId)
    let customerIdStr = this.customerId

    getShareParamsInit(path, customerIdStr, this.activityId, '棱镜社-忠于未知，活出理想', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510586585372&di=4475bbebad8646dde24b6ebf24c8db3e&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201209%2F25%2F20120925232033_HSZCS.jpeg', '参与活动遇见有趣的人')

    var that = this
    let config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json'},
      data: {
        'activityId': this.activityId,
        'customerId': this.customerId
      },
      method: 'post'
    }
    this.$ajax('api/cms/activity/queryActivityInfo', config).then(function (response) {
      console.log('加载活动详情')
      var actdata = response.data.data.activity
      var customerData = response.data.data.customerList
      actdata.activityStartTime = actdata.activityStartTime + '至' + actdata.activityEndTime
      actdata.activityAddr = '活动地点：' + actdata.activityAddr
      console.log(customerData)
      that.activity = actdata
      that.customerList = customerData
      that.isJoin = response.data.data.isJoin
      that.isHavPhone = response.data.data.isHavPhone
      that.isStart = response.data.data.isStart
    }).catch(function (error) {
      console.log(error)
    })
    let config1 = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
      data: {
        'currentPage': '0',
        'pageSize': '10',
        'customerId': that.customerId,
        'createBy': that.customerId,
        'commentModuleNo': commentModule.activity_activity,
        'commentTargetId': this.activityId
      },
      responseType: 'json',
      method: 'post'
    }
    this.$ajax('api/cms/comments/queryMany', config1).then(function (response) {
      console.log(response)
      that.comments = response.data.data
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    onCancel1 () {
      console.log('on cancel')
    },
    onConfirm1 (msg) {
      var phone = document.getElementById('phone').value
      console.log(document.getElementById('phone').value)
      let that = this
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'activityId': that.activityId,
          'customerId': that.customerId,
          'customerPhone': phone
        },
        responseType: 'json',
        method: 'post'
      }
      this.$ajax('api/cms/activity/joinActivity', config).then(function (response) {
        console.log(response)
        console.log('======================')
        console.log(that.customerBase.avatar)
        that.isJoin = response.data.data.isJoin
        var customerData = response.data.data.customerList
        that.customerList = customerData
      }).catch(function (error) {
        console.log(error)
      })
      this.showToast = true
    },
    onHide1 () {
      console.log('on hide')
    },
    onHideToast () {
      console.log('on onHideToast')
    },
    onShow1 () {
      console.log('on show')
    },
    onCancel2 () {
      console.log('on cancel')
    },
    onConfirm2 (msg) {
      let that = this
      let config = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'activityId': that.activityId,
          'customerId': that.customerid
        },
        responseType: 'json',
        method: 'post'
      }
      this.$ajax('api/cms/activity/joinActivity', config).then(function (response) {
        console.log(response)
        console.log('======================')
        console.log(that.customerBase.avatar)
        that.isJoin = response.data.data.isJoin
        var customerData = response.data.data.customerList
        that.customerList = customerData
      }).catch(function (error) {
        console.log(error)
      })
      this.showToast = true
    },
    onHide2 () {
      console.log('on hide')
    },
    onShow2 () {
      console.log('on show')
    },
    joinActivity: function (event) {
      console.log('show ishavePhone')
      console.log(this.isHavPhone)
      if (this.isHavPhone === '1') {
        console.log('有电话')
        this.show2 = true
      } else {
        console.log('没电话')
        this.show1 = true
      }
    },
    commentOther: function (id, commentTargetUserId, index) {
      this.index = index
      this.currentId = id
      this.commentTargetUserId = commentTargetUserId
      this.type = '2'
      console.log(id)
      this.show5 = true
    },
    commentMain: function () {
      this.currentId = null
      this.show5 = true
      this.type = '1'
    },
    onCancel () {
      console.log('on cancel')
    },
    onHide () {
      console.log('on hide')
    },
    onShow () {
      console.log('on show')
    },
    onShow5 () {
      this.$refs.confirm5.setInputValue('default')
    },
    onConfirm5 () {
      let that = this
      let commentContent = document.getElementById('commentContent').value
      console.log(commentContent)
      console.log(this.comments)
      if (this.comments[this.index] === undefined) {
        this.commentTargetUserId = null
      } else {
        this.commentTargetUserId = this.comments[this.index].commentBy
      }
      let config1 = {
        headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
        data: {
          'customerId': that.customerId,
          'commentContent': commentContent,
          'commentTargetUserId': this.commentTargetUserId,
          // 'commentType': '1',
          'commentType': this.type,
          'commentBy': that.customerId,
          'commentModuleNo': commentModule.activity_activity,
          'commentTargetId': this.activityId,
          'parentId': this.currentId
        },
        responseType: 'json',
        method: 'post'
      }
      this.$ajax('api/cms/comments/add', config1).then(function (response) {
        console.log(response.data.data)
        console.log(that.comments[that.index])
        console.log(that.index)
        if (response.data.data.parentId == null) {
          that.comments.unshift(response.data.data)
        } else {
          that.comments[that.index].subComents.push(response.data.data)
        }
      }).catch(function (error) {
        console.log(error)
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~vux/src/styles/1px.less';
.title {
    margin: 16px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 6px;
    text-align: center;
}
.content {
    margin: 32px;
    font-size: 13px;
    color: rgba(0,0,0,.54);
}
.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 10px 0px 10px 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.card-demo-flex span {
  color: #f74c31;
}

.participate-img li{
  width:40px;
  height:40px;
  float:left;
  display:inline;
  margin-left:5px;
}

.participate-img li img{
  width:40px;
  height:40px;
  border-radius: 50%;
}

.fly-btn-10{
    display:block;
    margin:auto;
    width:96%;
    height:42px;
    line-height:42px;
    text-align: center;
    border-radius:4px;
    background-color:#ff6769;
    cursor: pointer;
    color:#fff;
}

.list-block {
    margin: 0.75rem 0;
    font-size: 0.85rem;
}
.list-block ul {
    background: #fff;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}
.list-block-li {
    box-sizing: border-box;
    position: relative;
    padding-bottom: 5px;
    border-bottom: dotted 1px rgb(16, 197, 182);
    margin-bottom: 10px;
}

.content-inner-li {
    border-top: dotted 1px rgb(194, 194, 194);
    padding-top: 3px;
}
.list-block .item-content {
    box-sizing: border-box;
    min-height: 2.0rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.list-block .item-media {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    box-sizing: border-box;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.list-block.media-list .item-media img {
    display: block;
}
.list-block.media-list .item-inner {
    display: block;
    -webkit-align-self: stretch;
    align-self: stretch;
}

.list-block .item-media + .item-inner {
    margin-left: 0.55rem;
}

.list-block .item-inner {
    padding-right: 0.75rem;
    position: relative;
    width: 100%;
    min-height: 2.2rem;
    overflow: hidden;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.userProfile {
    float: left;
    line-height: 1.1rem;
    font-size: 0.75rem;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.list-block.media-list .item-title-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.list-block.media-list .item-title {
    font-weight: 500;
}
.list-block .item-subtitle {
    font-size: 0.75rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
}
.userSchool {
    line-height: 2.2rem;
    float: right;
    font-size: 0.75rem;
    font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.m-bar{
    border-color: #10c5b6;
    padding: 5px 20px 5px 20px;
    cursor: pointer;
    padding: 1px 3px;
    display: block;
    width: 30px;
    font-size: 12px;
    float: right;
    height: 20px;
    line-height: 20px;
    color: #10c5b6;
}
.card-content-inner{
  padding-top:3px;
}

</style>
